<template>
  <t-tooltip :content="help" :trigger="cpTooltipTrigger">
    <t-input
      v-model="valueThis"
      @change="_change"
      v-bind="$attrs"
      inputClass="custom-input"
      :clearable="getPropValue('clearable', true)"
      @focus="_focus"
      :readonly="readonly"
      :disabled="disabled"
      ref="controlInst"
      :label="cpLabel"
    >
      <template #suffixIcon v-if="strings.isNotBlank(suffixIcon)">
        <icon :name="suffixIcon" />
      </template>
    </t-input>
  </t-tooltip>
</template>

<script>
import { Icon } from 'tdesign-icons-vue'
import customImage from '@/components/custom/form/customImage.vue'
import wx from 'weixin-js-sdk'

export default {
  desc: '自定义输入框',
  components: {
    customImage,
    Icon
  },
  name: 'customInput',
  props: {
    /**
     * @Description：上级页面对象
     * @Date 2023-10-10
     */
    parent: {
      type: Object,
      default: () => {}
    },
    /**
     * @Description：上级表单对象
     * @Date 2023-10-10
     */
    form: {
      type: Object,
      default: () => {}
    },
    /**
     * @Description：输入提示信息
     * @Date 2023-10-10
     */
    help: {
      type: String,
      default: () => ''
    },
    /**
     * @Description：右侧图标
     * @Date 2023-10-10
     */
    suffixIcon: {
      type: String,
      default: () => ''
    },
    /**
     * @Description：只读
     * @Date 2023-10-10
     */
    readonly: {
      type: Boolean,
      default: () => false
    },
    /**
     * @Description：禁用
     * @Date 2023-10-10
     */
    disabled: {
      type: Boolean,
      default: () => false
    },
    /**
     * @Description：true 不显示标签名称
     * @Date 2023-10-10
     */
    hideLabel: {
      type: Boolean,
      default: () => false
    },
    /**
     * @Description：是否是表单项内部
     * @Date 2023-10-10
     */
    isInnerForm: {
      type: Boolean,
      default: () => true
    },
    /**
     * @Description：非表单项时，v-model 值
     * @Date 2023-10-28
     */
    value: {
      type: String,
      default: () => ''
    }
  },
  created() {
    this.bindFormItemProp()
  },
  data() {
    return {
      valueThis: null,

      // 表单配置
      formItemProp: {
        name: '',
        label: ''
      },
      scanIcon: require('@/assets/app/icon/scan.png')
    }
  },
  methods: {
    // 值变化更新表单值
    _change() {
      this.parent.$set(this.form, this.formItemProp.name, this.valueThis)
      this.$emit('change', this.valueThis)
    },

    /**
     * @Description：获取属性值
     * @Author wyt
     * @Date 2023-09-27
     */
    getPropValue(name, defaultValue) {
      if (this.$attrs && this.$attrs[name] != undefined) {
        return this.$attrs[name]
      }
      return defaultValue
    },
    /**
     * @Description：获取表单配置
     * @Author wyt
     * @Date 2023-09-27
     */
    bindFormItemProp() {
      if (this.isInnerForm) {
        if (!this.$parent.$options || !this.$parent.$options.propsData) {
          console.error('字段未找到表单项，请检查')
          return false
        }
        this.formItemProp = {
          name: this.$parent.$options.propsData.name,
          label: this.$parent.$options.propsData.label
        }

      } else {
        this.formItemProp = {
          name: this.$attrs.name,
          label: this.$attrs.label
        }
      }

      if (!this.formItemProp.name) {
        console.error('字段未配置表单name')
        return false
      }
      if (!this.formItemProp.label) {
        console.error('字段未配置表单name')
        return false
      }
    },
    /**
     * @Description：聚焦事件,回调上级
     * @Author wyt
     * @Date 2023-09-27
     */
    _focus() {
      this.$emit('focus')
    },
    /**
     * @Description：聚焦事件，使当前组件聚焦
     * @Author wyt
     * @Date 2023-09-27
     */
    focus() {
      this.$refs.controlInst.focus()
    },
    /**
     * @Description：聚焦事件，使当前组件聚焦
     * @Author wyt
     * @Date 2023-09-27
     */
    vxScan() {
      let that = this
      wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function (res) {
          try {
            var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            if (result && result.split(',').length  == 2) {
              that.valueThis = result.split(',')[1]
              that._change()
            }
          }catch (e) {
            alert('扫描处理异常异常' + e)
          }
        }
      })
    }
  },
  watch: {
    // 监听表单设置本组件的值
    form: {
      immediate: true, // 初始创建 watch 时立即执行回调函数
      deep: true, // 监听到对象里面的值的变化
      handler() {
        this.valueThis = null
        if (this.form) {
          this.valueThis = this.form[this.formItemProp.name]
        }
      },
    },
    // 监听表单设置本组件的值
    value: {
      immediate: true, // 初始创建 watch 时立即执行回调函数
      deep: true, // 监听到对象里面的值的变化
      handler() {
        this.valueThis = ''
        if (this.value) {
          this.valueThis = this.value
        }
      },
    }
  },
  computed: {
    cpTooltipTrigger() {
      return this.strings.isBlank(this.help) ? '' : 'hover'
    },
    cpLabel() {
      if (this.hideLabel) {
        return ''
      }
      return this.getPropValue('label', '')
    }
  }
}
</script>

<style lang="scss">
</style>
